<template>
    <Form class="revise-form" ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="100">
        <FormItem label="原始密码" prop="yspasswd">
            <Input type="password" v-model="formCustom.yspasswd" />
        </FormItem>
        <FormItem label="新密码" prop="passwd">
            <Input type="password" v-model="formCustom.passwd" />
        </FormItem>
        <FormItem label="再次输入新密码" prop="passwdCheck">
            <Input type="password" v-model="formCustom.passwdCheck" />
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formCustom')">确定重置</Button>
            <Button @click="cancelBtn" style="margin-left: 8px">取消</Button>
        </FormItem>
    </Form>
</template>
<script>
import userApi from '@/api/User.api.js'
import { mapMutations, mapActions } from 'vuex'
export default {
  name: 'password',
  data () {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码！'))
      } else {
        if (this.formCustom.passwdCheck !== '') {
          // 对第二个密码框单独验证
          this.$refs.formCustom.validateField('passwdCheck')
        }
        callback()
      }
    }
    const validatePassCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码！'))
      } else if (value !== this.formCustom.passwd) {
        callback(new Error('两次输入的密码不一致！'))
      } else {
        callback()
      }
    }

    return {
      formCustom: {
        yspasswd: '',
        passwd: '',
        passwdCheck: ''
      },
      ruleCustom: {
        yspasswd: [
          { validator: validatePass, trigger: 'blur' }
        ],
        passwd: [
          { validator: validatePass, trigger: 'blur' }
        ],
        passwdCheck: [
          { validator: validatePassCheck, trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    // console.log(111111)
  },
  methods: {
    ...mapMutations([
      'closeTag'
    ]),
    ...mapActions([
      'handleLogOut'
    ]),
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          userApi.UpdatePassword({
            OldPassword: this.formCustom.yspasswd,
            Password: this.formCustom.passwd,
            PasswordAgain: this.formCustom.passwdCheck
          }).then((res) => {
            console.log(res)
            if (res.data.success) {
              this.$Message.success(res.data.message)
              this.cancelRouter()
              this.handleLogOut().then(() => {
                this.$router.push({
                  name: 'login'
                })
              })
            } else {
              
              this.$Message.error({
                content: res.data.message,
                duration: 10,
                closable: true
              })
            }
          })
        } else {
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    cancelRouter () {
      let router = this.$store.state.app.tagNavList.find((item) => {
        return item.name == this.$route.name
      })
      this.closeTag(router)
    },
    cancelBtn () {
      this.$router.back(-1)
    }
  }
}
</script>
<style scoped>
  .revise-form{
    width: 50%;
    margin: 0 auto;
  }
</style>
